<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>视界 - 注册</title>
		<script src="js/jquery.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script src="js/jquery.validate.cn.js"></script>
		<link rel="stylesheet" href="css/register.css" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
	</head>
	<body>
		<div class="container">
			<div class="register-container">
				<div class="left-panel">
					<div class="logo">
						<h1>视界</h1>
						<p>发现精彩视界，分享美好生活</p>
					</div>
					<div class="features">
						<div class="feature">
							<i class="fas fa-film"></i>
							<span>海量高清视频</span>
						</div>
						<div class="feature">
							<i class="fas fa-users"></i>
							<span>与全球创作者互动</span>
						</div>
						<div class="feature">
							<i class="fas fa-cloud-upload-alt"></i>
							<span>一键上传分享</span>
						</div>
					</div>
				</div>
				<div class="right-panel">
					<div class="form-header">
						<h2>创建账号</h2>
						<p>加入视界，开启您的视频之旅</p>
					</div>
					<form class="register-form">
						<div class="form-group">
							<label for="username"><i class="fas fa-user"></i></label>
							<input type="text" id="username" name="username" placeholder="用户名" />
						</div>
						<div class="form-group">
							<label for="email"><i class="fas fa-envelope"></i></label>
							<input type="email" id="email" name="email" placeholder="电子邮箱" />
						</div>
						<div class="form-group">
							<label for="password"><i class="fas fa-lock"></i></label>
							<input type="password" id="password" name="password" placeholder="密码" />
						</div>
						<div class="form-group">
							<label for="confirm-password"><i class="fas fa-lock"></i></label>
							<input type="password" id="confirm-password" name="confirm_password" placeholder="确认密码" />
						</div>
						<button type="submit" class="register-btn">注册</button>
						<div class="social-login">
							<p>或使用社交账号登录</p>
							<div class="social-icons">
								<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
								<a href="#" class="social-icon"><i class="fab fa-qq"></i></a>
								<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
							</div>
						</div>
					</form>
					<div class="login-link">
						<p>已有账号？<a href="#">立即登录</a></p>
					</div>
				</div>
			</div>
		</div>
		<script src="js/register.js"></script>
		<script>
			$(document).ready(function() {
				$.validator.setDefaults({
					submitHandler: function(form) {
						form.submit();
					}
				});
				
				$(".register-form").validate({
					rules: {
						username: {
							required: true,
							rangelength: [3, 10]
						},
						password: {
							required: true,
							rangelength: [8, 20]
						},
						confirm_password: {
							required: true,
							equalTo: "#password"
						},
						email: {
							required: true,
							email: true
						}
					},
					messages: {
						username: {
							required: "用户名不能为空",
							rangelength: "用户名长度需在 3~10 个字符之间"
						},
						password: {
							required: "密码不能为空",
							rangelength: "密码长度需在 8~20 个字符之间"
						},
						confirm_password: {
							required: "请再次输入密码",
							equalTo: "两次密码不一致"
						},
						email: {
							required: "邮箱不能为空",
							email: "请输入有效的电子邮箱地址"
						}
					},
					errorElement: "span",
					errorPlacement: function(error, element) {
						error.addClass("error-message");
						error.insertAfter(element);
					}
				});
			});
		</script>
	</body>
</html>
